<template>
  <div style="background-color: #ffffff">
    <el-card v-loading="loading" style="width: 98%; margin: 0 auto">
      <el-scrollbar :height="textHeight" ref="textScrollbarRef">
        <div
          v-html="formHtml"
          :id="'dataForm' + tableId"
          class="dataForm"
          @contextmenu.prevent="openMenu($event)"
          @click="tdColor($event)"
          @dblclick="trColor($event)"
        ></div>
      </el-scrollbar>
    </el-card>
    <!-- 流程记录 -->
    <el-dialog
      :class="'el-dialog-theme3'"
      append-to-body
      draggable
      v-model="recordOpen"
      :title="recordTitle"
      width="950"
    >
      <el-table :data="recordList" v-loading="loadingRecord" max-height="60vh">
        <el-table-column label="步骤" align="center">
          <template #default="scope">
            <span v-if="scope.row.userStepId == 0">现场填报</span>
            <span v-if="scope.row.userStepId == 1">复核</span>
            <span v-if="scope.row.userStepId == 2">审核</span>
          </template>
        </el-table-column>
        <el-table-column label="姓名" prop="nickName" align="center" />
        <el-table-column label="开始时间" prop="createTime" align="center" />
        <el-table-column label="结束时间" prop="finishTime" />
        <el-table-column label="状态">
          <template #default="scope">
            <span v-if="scope.row.userStatus == 0">未完成</span>
            <span v-if="scope.row.userStatus == 1">已完成</span>
            <span v-if="scope.row.userStatus == 2">退回</span>
          </template>
        </el-table-column>
      </el-table>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="danger" @click="recordOpen = false">关 闭</el-button>
        </div>
      </template>
    </el-dialog>
    <ul
      v-show="visible"
      :style="{ left: left + 'px', top: top + 'px' }"
      class="contextmenu"
    >
      <li @click="addTr(contextmenuVal)" v-if="showTr(contextmenuVal)">
        <Plus style="width: 1em; height: 1em" /> 增加行
      </li>
      <li
        @click="delTr(contextmenuVal)"
        v-if="showTr(contextmenuVal)"
        :style="'cursor:' + cursorStyle"
      >
        <Minus style="width: 1em; height: 1em" /> 删除行
      </li>
      <li @click="downWrite(contextmenuVal)" v-if="showDown(contextmenuVal)">
        <Bottom style="width: 1em; height: 1em" /> 向下填充
      </li>
      <li
        v-for="item in childComponentList"
        @click="byConditionDownWrite(contextmenuVal, item.componentId)"
        v-if="showDown(contextmenuVal)"
      >
        <Bottom style="width: 1em; height: 1em" /> 根据{{ item.componentName }}向下填充
      </li>
    </ul>
    <el-button
      @click="upClick"
      style="position: absolute; bottom: 40px; right: 40px; z-index: 9999"
      type="success"
      link
    >
    </el-button>
    <el-dialog
      :class="'el-dialog-theme3'"
      append-to-body
      draggable
      :close-on-click-modal="false"
      v-model="submitOpen"
      :title="submitTitle"
      width="350px"
      @close="submitClose"
    >
      <el-input
        style="margin-bottom: 10px"
        v-model="filterText"
        clearable
        placeholder="请输入人员名称"
        prefix-icon="UserFilled"
      >
      </el-input>
      <el-scrollbar height="50vh" ref="scrollbarRef">
        <el-tree
          :data="treeData"
          :props="defaultProps"
          :default-expand-all="true"
          @node-click="nodeClick"
          node-key="userId"
          :highlight-current="true"
          ref="treeRef"
          v-loading="treeLoading"
          :filter-node-method="filterNode"
        />
      </el-scrollbar>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="success" @click="submitConfirm">确认</el-button>
          <el-button type="danger" @click="submitOpen = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
    <uploadImage ref="imageRef" @showImage="showImage"></uploadImage>
  </div>
</template>

<script setup>
import { postContent, getMarkList, delContent } from "@/api/cyCheck/filling";
import {
  addTableData,
  getTree,
} from "@/api/myTask/myTask";
import uploadImage from "./uploadImage.vue";

import bus from "@/utils/eventBus";

import "jquery-ui-dist/jquery-ui";
import "@/components//popover/jquery.webui-popover.min.js";
import "@/components/popover/jquery.webui-popover.min.css";
import "@/components/datepicker/datepicker.css?t=1";
import "@/plugins/jquery.jqprint-0.3.js";
import "jquery-ui-dist/jquery-ui.min.css";
import "@/components/datepicker/moment.min.js";
import "@/components/datepicker/datepicker.all.js";

import { nextTick, onMounted, watch } from "vue";
const imageRef = ref();
const { proxy } = getCurrentInstance();

const formHtml = ref("");
const tFId = ref("");
const loading = ref(false);
//用户状态 0：待办 1已办
const userStatus = ref(0);
//步骤id
const userStepId = ref(0);
const recordOpen = ref(false);
const recordTitle = ref("流程记录");
const recordList = ref([]);
const loadingRecord = ref(false);
const formulaList = ref([]);
const tableId = ref();
let $form;
const props = defineProps({
  formData: {
    type: Object,
  },
  finished: {
    default: "false",
  },
});

nextTick(() => {
  showTable(props.formData);
});

function showTable(formData) {
  if (!formData || !formData.tableId) {
    formHtml.value = "<div style='color:red'>未找到表单</div>";
    return;
  }
  tableId.value = formData.tableId;
  formHtml.value = formData.tableContent;
  nextTick(() => {
    // $(".date").datepicker({
    //   dateFormat: "yy-mm-dd HH:mm",
    //   timeFormat: "HH:mm"
    // });
    $('.datepicker_mm').datePicker({ 
            format: 'YYYY-MM-DD HH:mm' 
    });  
    $('.datepicker').datePicker({ 
            format: 'YYYY-MM-DD' 
    }); 
    $('.datepicker1').datePicker({ 
            format: 'YYYY年MM月DD日' 
    });
    initPopover();
    setFixerTr();
    if ($("tr.childTr").length == 1) {
      cursorStyle.value = "not-allowed";
    } else {
      cursorStyle.value = "pointer";
    }
    $form = $("#dataForm" + tableId.value);
    $form.find("td").each(function (i) {
        if ($(this).html().indexOf("^") != -1 || $(this).html().indexOf("@") != -1) {
          $(this).data("v-value",$(this).text());
          $(this).html(proxy.getSupAndSub($(this).text()));
        }
    });
    loadImage();
    addImageEvent();
  });
  // if (tFId.value) {
  //   loading.value = true;
  //   let resultNum = roundHalfEven(17.5, 3);
  //   console.log(resultNum);
  //   getTemplateData(tFId.value).then((res) => {
  //     // content.value = '<table style="border-collapse: collapse; width: 100%;" border="1"><tbody><tr><td style="width: 50.0556%;">测试</td><td style="width: 50.0556%;"><input type="date" style="width: 100%;border:0px"/></td></tr></tbody></table>'
  //     if (res.data.userStatus) {
  //       userStatus.value = res.data.userStatus;
  //       userStepId.value = res.data.userStepId;
  //     }
  //     content.value = res.data.content;
  //     childComponentList.value = res.data.childComponentList;
  //     loading.value = false;
  //     nextTick(() => {
  //       $(".date").datepicker({
  //         dateFormat: "yy-mm-dd", // 设置日期格式
  //       });
  //       if (userStatus.value == 0) {
  //         initPopover();
  //       }
  //       setFixerTr();
  //     });
  //     getHeight();
  //   });
  // }
}

//设置固定行为表头或表尾
function setFixerTr() {
  let $fixedHead = $("tr.fixed-head");
  let height = 0;
  $fixedHead.each(function (i) {
    $(this).css("top", height + "px");
    height += $(this).height();
  });
  let $fixedFoot = $("tr.fixed-foot");
  height = 0;
  for (let i = $fixedFoot.length - 1; i >= 0; i--) {
    let $this = $fixedFoot.eq(i);
    $this.css("bottom", height + "px");
    height += $this.height() + 1;
  }
}
function getData() {
  let jsonData = {};
  let flag = true;
  $form.find(".required").removeClass("required");
  let validateFlag = { required: 1 };
  $form.find(".component").each(function () {
    if (!$(this).parents("tr:first").hasClass("childTr")) {
      //排除子表行控件
      let jsonValue = getComponentData($(this), validateFlag);
      if (jsonValue) {
        Object.assign(jsonData, jsonValue);
      }
    }
  });
  if (validateFlag.required == -1) {
    proxy.$modal.msgError("当前表单还有未填写的数据！");
    return false;
  }
  //查询子表的控件数据
  let childJsonArray = [];
  $form.find("tr.childTr").each(function () {
    let childJson = {};
    if ($(this).attr("id")) {
      childJson.id = $(this).attr("id");
    }
    if ($(this).data("id")) {
      Object.assign(childJson, eval($(this).data("id")));
    }
    let $components = $(this).find(".component");
    $components.each(function () {
      let jsonValue = getComponentData($(this), validateFlag);
      if (jsonValue) {
        Object.assign(childJson, jsonValue);
      }
    });
    if (!$.isEmptyObject(childJson) && $components.length > 0) {
      //判断json对象是否为空
      childJsonArray.push(childJson);
    }
  });
  if (validateFlag.required == -1) {
    proxy.$modal.msgError("当前表单还有未填写的数据！");
    return false;
  }
  if (childJsonArray.length > 0) {
    jsonData.childDataList = childJsonArray;
  }
  jsonData.tFId = tFId.value;
  return jsonData;
}

function getFormData() {
  let formData = getData();
  if (!formData) {
    return;
  }
  formData.tableId = tableId.value;
  return formData;
}

// 记得暴露
defineExpose({
  showTable,
  getFormData,
  printDateForm,
});
/**
 * 保存数据
 */
function saveData(isAuto) {
  let jsonData = getData();
  //保存数据
  addTableData(jsonData).then((res) => {
    if (isAuto) return;
    proxy.$modal.msgSuccess("保存成功！");
  });
}

function getComponentData($that, validateFlag) {
  let name = $that.attr("name");
  if (!name) return null;
  let json = {};
  let jsonValue = "";
  let $componentName = $that.find("[name=" + name + "]");
  if ($componentName.length == 0) {
    $componentName = $that.find("[data-id='" + name + "']");
  }
  if ($componentName.length == 0) {
    if ($that.data("required") && $.trim($that.text()).length == 0) {
      // proxy.$modal.msgError($that.data("name") + "不能为空！");
      $that.addClass("required");
      validateFlag.required = -1;
      return;
    } else if ($that.val().length > 0) {
      jsonValue = $.trim($that.val());
    } else {
      if($that.data("v-value")){
        jsonValue = $.trim($that.data("v-value"));
      }else{
        if ($that.data("type")) {//长文本
          jsonValue = $.trim($that.html());
        } else {
          jsonValue = $.trim($that.text());
        }
      }
    }
  } else {
    let dataName = $that.data("name");
    let required = $that.data("required");
    if (validateFlag.required == -1 && required == 0) return;
    let nodeType = $componentName[0].nodeName;
    let type = $componentName.attr("type");
    if (nodeType && nodeType.toLowerCase() == "select") {
      jsonValue = $componentName.val();
      if (required && $.trim(jsonValue).length == 0) {
        $that.addClass("required");
        // proxy.$modal.msgError(dataName + "不能为空！");
        validateFlag.required = -1;
        return;
      }
      json[name + "t"] = $componentName.find("option:selected").text();
    } else if (type && (type == "checkbox" || type == "radio")) {
      let $checkbox = $that.find("input[data-id='" + name + "']:checked");
      if ($checkbox.length == 0) {
        if (required) {
          $that.addClass("required");
          // proxy.$modal.msgError(dataName + "不能为空！");
          validateFlag.required = -1;
          return;
        }
        return;
      }
      let values = "";
      let texts = "";
      $checkbox.each(function () {
        values += "," + this.value;
        texts += "、" + $(this).next().text();
      });
      jsonValue = values.substring(1);
      json[name + "t"] = texts.substring(1);
    } else if ($componentName.hasClass("sign")) {
      if (required && !$componentName.is(":visible")) {
        $that.addClass("required");
        // proxy.$modal.msgError(dataName + "不能为空！");
        validateFlag.required = -1;
        return;
      } else if ($componentName.is(":visible")) {
        //签字控件并且显示
        jsonValue = $componentName.attr("src");
      }
    } else {
      jsonValue = $.trim($componentName.val());
      if (required && $.trim(jsonValue).length == 0) {
        $that.addClass("required");
        // proxy.$modal.msgError(dataName + "不能为空！");
        validateFlag.required = -1;
        return;
      }
    }
  }
  //if (jsonValue.length == 0) return null;
  json[name] = jsonValue;
  return json;
}

// ---------------------------------右击列表----------------------------------------
const left = ref(0);
const top = ref(0);
const visible = ref(false);
const contextmenuVal = ref({});
const childComponentList = ref([]);
// 右击事件
function openMenu(e) {
  if (userStatus.value != 0 || userStepId.value != 0) return;

  let $target = $(e.target);
  let isNext = false;
  if (e.target.nodeName.toLowerCase() != "td") {
    $target = $target.parents("td:first");
    isNext = true;
  }
  if (!$target.parents("tr:first").hasClass("childTr")) return;
  if (!isNext && $target.prop("contenteditable") === "false") return;
  // 右击加背景颜色
  var $bgc = $(".bgcTdr");
  $bgc.removeClass("bgcTdr");
  $target.addClass("bgcTdr");

  left.value = e.clientX - 330;
  top.value = e.clientY - 140;
  visible.value = true;

  if (
    e.target.nodeName.toLowerCase() == "td" &&
    e.target.childNodes[0]?.nodeName != "#text" &&
    e.target.childNodes[0]
  ) {
    contextmenuVal.value = e.target.childNodes[0];
    return;
  }

  contextmenuVal.value = e.target;
}

function closeMenu() {
  visible.value = false;
}

// 提示框
const markList = ref([]);
function initPopover() {
  var settings = {
    trigger: "dblclick",
    title: "标记",
    width: 300,
    closeable: true,
    // 确定  取消  关闭  按钮显示隐藏
    showBtn: props.finished == "true",
    style: "",
    padding: false,
    content: function (webuiPopover) {
      var markId = webuiPopover.$element.attr("markId");
      var content = "";
      for (const item of markList.value) {
        if (item.markId == markId) {
          content = item.content;
          break;
        }
      }
      return content;
    },
    onHide: function ($target, $element, btn) {
      return new Promise((resolve, reject) => {
        var markId = $element.attr("markId");
        if (btn == "confirm") {
          var content = $target.find(".webui-popover-content").text();
          var componentId = markId ? "" : $element.attr("name");
          var childFormId = markId ? "" : $element.parent().attr("id");
          if (!content) {
            proxy.$modal.msgError("请输入标记内容");
            return false;
          }
          let temp = {
            content: content,
            componentId: componentId,
            markId: markId,
            formId: props.formData.formId,
            tableId: props.formData.tableId,
            childFormId: childFormId,
          };
          postContent(temp)
            .then((res) => {
              if (!markId) {
                $element.attr("markId", res.data);
                markList.value.push({ markId: res.data, content: content });
              } else {
                for (const item of markList.value) {
                  if (item.markId == markId) {
                    item.content = content;
                    break;
                  }
                }
              }
              $element.addClass("markColor");
              resolve(true);
            })
            .catch(() => {
              reject(false);
            });
        } else {
          if (!markId) {
            proxy.$modal.msgError("没有标记");
            return false;
          }
          delContent(markId)
            .then((res) => {
              proxy.$modal.msgSuccess("删除成功");
              markList.value = markList.value.filter((item) => {
                return item.markId != markId;
              });
              $element.removeAttr("markId");
              $element.removeClass("markColor");
              resolve(true);
            })
            .catch((res) => {
              reject(false);
            });
        }
      });
    },
  };
  if (!props.formData || !props.formData.formId) {
    return;
  }
  getMarkList({ formId: props.formData.formId }).then((res) => {
    markList.value = res.data;
    for (const item of markList.value) {
      let $component;
      if (item.childFormId) {
        //子表行
        $component = $("#" + item.childFormId).find("[name='" + item.componentId + "']");
      } else {
        $component = $("[name='" + item.componentId + "']");
      }
      if ($component.length > 0) {
        $component.addClass("markColor").addClass("mark_");
        $component.attr("markId", item.markId);
      }
    }
    $(".mark_").webuiPopover("destroy").webuiPopover(settings);
  });
}

// 向下填充
function downWrite(target) {
  let $s = $(target);
  let isChild = target.nodeName.toLowerCase() != "td";
  if (isChild) {
    let value = $s.val();
    let $target = $s.parents("td:first");
    var $tr = $target.parents("tr:first");
    while (true) {
      $tr = $tr.next();
      if ($tr.length == 0) {
        break;
      }
      var $t = $tr.find("[name='" + $target.attr("name") + "']");
      if ($t.length == 0) {
        break;
      }
      if ($t[1].type == "select-one") {
        var $options = $t[1].children;
        for (const index in $options) {
          if ($options[index].getAttribute("value") == value) {
            $options[index].setAttribute("selected", "");
            break;
          } else {
            $options[index].removeAttribute("selected");
          }
        }
      } else {
        var $e = $t[1];
        $e.value = value;
      }
    }
  } else {
    let value = $s.text();
    var $tr = $s.parents("tr:first");
    while (true) {
      $tr = $tr.next();
      if ($tr.length == 0) {
        break;
      }
      let $td = $tr.find("[name='" + $s.attr("name") + "']");
      if ($td.length == 0) {
        break;
      }
      $td.text(value);
    }
  }
}

// 根据条件向下填充
function byConditionDownWrite(target, cId) {
  let $s = $(target);
  let isChild = target.nodeName.toLowerCase() != "td";
  var clickValue = "";
  if (isChild) {
    for (const item of $s.parents("td:first").siblings()) {
      if (item.attributes.name.value == cId) {
        let $i = $(item);
        clickValue = $i.text();
        break;
      }
    }
    let value = $s.val();
    let $target = $s.parents("td:first");
    var $tr = $target.parents("tr:first");
    while (true) {
      $tr = $tr.next();
      if ($tr.length == 0) {
        break;
      }
      var $t = $tr.find("[name='" + $target.attr("name") + "']");
      if ($t.length == 0) {
        break;
      }
      if ($t[1].type == "select-one") {
        var $options = $t[1].children;
        for (const item of $tr[0].children) {
          if (item.attributes.name.value == cId) {
            let $i = $(item);
            if ($i.text() == clickValue) {
              for (const index in $options) {
                if ($options[index].getAttribute("value") == value) {
                  $options[index].setAttribute("selected", "");
                  break;
                } else {
                  $options[index].removeAttribute("selected");
                }
              }
            }
            break;
          }
        }
      } else {
        for (const item of $tr[0].children) {
          if (item.attributes.name.value == cId) {
            let $i = $(item);
            if ($i.text() == clickValue) {
              var $e = $t[1];
              $e.value = value;
            }
            break;
          }
        }
      }
    }
  } else {
    let value = $s.text();
    var $tr = $s.parents("tr:first");
    for (const item of $s.siblings()) {
      if (item.attributes.name.value == cId) {
        let $i = $(item);
        clickValue = $i.text();
        break;
      }
    }
    while (true) {
      $tr = $tr.next();
      if ($tr.length == 0) {
        break;
      }
      let $td = $tr.find("[name='" + $s.attr("name") + "']");
      if ($td.length == 0) {
        break;
      }
      for (const item of $tr[0].children) {
        if (item.attributes.name.value == cId) {
          let $i = $(item);
          if ($i.text() == clickValue) {
            $td.text(value);
          }
          break;
        }
      }
    }
  }
}

// 增加行
function addTr(target) {
  var $target = $(target);
  var $tr = $target.parents("tr:first");
  let $clone = $tr.clone();
  $tr.after($clone);
  cursorStyle.value = "pointer";
}

const cursorStyle = ref("pointer");

// 删除行
function delTr(target) {
  if ($("tr.childTr").length == 1) {
    return;
  }
  var $target = $(target);
  var $tr = $target.parents("tr:first");
  $tr.remove();
  if ($("tr.childTr").length == 1) {
    cursorStyle.value = "not-allowed";
  } else {
    cursorStyle.value = "pointer";
  }
}

// 显示隐藏ul中的li
function showDown(e) {
  let $target = $(e);
  if (e.nodeName?.toLowerCase() != "td") {
    $target = $target.parents("td:first");
  }
  if (!$target.attr("sourcetype")) return false;
  let sourcetype = parseInt($target.attr("sourcetype"));
  let isWrite = parseInt($target.attr("isWrite"));
  if (sourcetype != 2 && sourcetype != 3 && isWrite != 1) return false;
  return true;
}

// 显示隐藏ul中的li
function showTr(e) {
  let $target = $(e);
  if (e.nodeName?.toLowerCase() != "td") {
    $target = $target.parents("td:first");
  }
  if (!$target.parents("tr:first").is(".child-write")) return false;
  return true;
}

// 单击td变色
function tdColor(e) {
  var $target = $(e.target);
  var $bgc = $(".bgcTdr");
  $bgc.removeClass("bgcTdr");
  if ($target[0].tagName.toLowerCase() != "td") {
    $target = $target.parents("td:first");
  }
  $target.addClass("bgcTdr");
}

// 双击tr变色
function trColor(e) {
  var $target = $(e.target);
  var $tr = $target.parents("tr:first");
  var $bgc = $(".bgcTdr");
  $bgc.removeClass("bgcTdr");
  $tr.addClass("bgcTdr");
}

watch(visible, (value) => {
  if (value) {
    document.body.addEventListener("click", closeMenu);
  } else {
    document.body.removeEventListener("click", closeMenu);
  }
});

// -------------------------------------------打印---------------------------------------------
function printDateForm() {
  let isPortrait = $("#dataForm").find("table:first").width() * 0.75 > 600;
  $(".dataForm").jqprint({
    debug: false,
    importCSS: false,
    operaSupport: true,
    printContainer: true,
    portrait: isPortrait,
  });
}

// ---------------------------------------------回到顶部--------------------------------------
function upClick() {
  $form[0].scrollIntoView();
}

const textHeight = ref(0);

function getHeight() {
  nextTick(() => {
    textHeight.value = proxy.getSubFileHeight(proxy, "textScrollbarRef", 20);
  });
}

function isUpClick() {
  // document.getElementById("dataForm")
}

onMounted(() => {
  nextTick(() => {
    getHeight();
    window.addEventListener("resize", getHeight);
    isUpClick();
    window.addEventListener("resize", isUpClick);
  });
});
onUpdated(() => {
  nextTick(() => {
    getHeight();
    isUpClick();
  });
});
onBeforeUnmount(() => {
  bus.off("submit");
  window.removeEventListener("resize", getHeight);
  window.removeEventListener("resize", isUpClick);
});

// -------------------------------------------手动审核------------------------------------------
const submitOpen = ref(false);
const submitTitle = ref("选择提交人");
const treeData = ref([]);
const defaultProps = ref({ label: "groupName", children: "children" });
const treeLoading = ref(false);
const userId = ref("");
const filterText = ref("");

function submitClose() {
  filterText.value = "";
  userId.value = "";
  treeData.value = [];
}

function Manual() {
  submitOpen.value = true;
  treeLoading.value = true;
  getTree().then((res) => {
    treeLoading.value = false;
    treeData.value = res.data;
  });
}

function nodeClick(val) {
  userId.value = val.userId;
}

function submitConfirm(params) {
  if (!userId.value) {
    proxy.$modal.msgError("未选择人员");
    return;
  }
  proxy.$modal.confirm("确定提交吗？").then(function () {
    let jsonData = getData();
    jsonData.userId = userId.value;
    addTableData(jsonData).then((res) => {
      proxy.$modal.msgSuccess("保存成功！");
      submitOpen.value = false;
    });
  });
}

function filterNode(value, data) {
  if (!value) {
    return true; // 如果搜索框为空，则显示所有节点
  }
  return data.groupName.includes(value); // 根据节点的 groupName 属性进行名称过滤
}

function addImageEvent() {
  // if(userStatus.value != 0 && userStepId.value != 0) return;
  //delegate：委托事件，也可以对以后新创建的dom生效。
  $form.delegate("td.component.image", "click", function () {
    let imageType = $(this).data("filetype");
    if (!imageType) {
      proxy.$modal.msgError("未指定图片类型，请联系管理员！");
      return;
    }
    let bytes = $(this).find(".img-lg").attr("src");
    imageRef.value.editCropper("", imageType, $(this).data("imageid"), bytes, $(this));
  });
}

/**
 * 回显图片
 * @param {图片数据} imageData
 */
function showImage(imageData, $imageConent) {
  let { id, bytes } = imageData;
  let imageHtml = '<img src="' + bytes + '" class="img-lg img-lg" />';
  $imageConent.find(".img-lg").remove();
  $imageConent.data("imageid", id);
  $imageConent.prepend(imageHtml);
}

function loadImage() {
  $form.find("td.image").each(function () {
    if (!$(this).data("imageid")) return true;
    let $that = $(this);
    proxy.$download.previewPicById($that.data("imageid")).then((res) => {
      $that.find(".img-lg").remove();
      let imageHtml =
        '<img src="' + res + '" class="img-lg"  style="width:100px;height:200px;"/>';
      $that.prepend(imageHtml);
    });
  });
}
watch(
  () => filterText.value,
  (val) => {
    proxy.$refs["treeRef"].filter(val);
  }
);
</script>

<style lang="scss" scoped>
.dataForm:deep(div.sign:hover .cha) {
  display: block !important;
}

.dataForm:deep(td) {
  word-break: break-all !important;
  font-size: 14px;
  vertical-align: middle;
}

.dataForm:deep(.bgcTdr) {
  background-color: #d8fdde;
}

.dataForm:deep(.required) {
  border: 2px solid red !important;
}

.dataForm:deep(.fixed-head),
.dataForm:deep(.fixed-foot) {
  position: sticky;
  background-color: #eee;
  z-index:1;
}

.contextmenu {
  margin: 0;
  background: #fff;
  z-index: 3000;
  position: absolute;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);

  li {
    margin: 0;
    padding: 7px 16px;
    cursor: pointer;

    &:hover {
      background: #eee;
    }
  }
}

.dataForm:deep(.markColor) {
  background: transparent url("/src/assets/images/report.gif") no-repeat scroll 0 0;
}

.dataForm:deep(td .cover::after) {
  content: "+";
  position: absolute;
  top: 50%;
  left: 50%;
  color: #999;
  font-size: 35px;
  transform: translate(-50%, -50%);
}
</style>
